<template>
  <div class="service-detail">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h2>基本信息</h2>
      </div>
      <el-row :gutter="20" class="info-item" align="middle">
        <el-col :span="12"> <b>真实姓名：</b> {{ serviceData.name }} </el-col>
        <el-col :span="12"> <b>登录账号：</b> {{ serviceData.code }} </el-col>
      </el-row>
      <el-row :gutter="20" class="info-item" align="middle">
        <el-col :span="24">
          <b>服务城市：</b>
          {{ serviceData.workerCertificationAuditList[0].citiesServed }}
        </el-col>
      </el-row>
      <el-row :gutter="20" class="info-item" align="middle">
        <el-col :span="12"> <b>综合评分：</b> {{ serviceData.score }} </el-col>
        <el-col :span="12">
          <b>认证时间：</b>
          {{ serviceData.workerCertificationAuditList[0].updateTime }}
        </el-col>
      </el-row>
      <el-row :gutter="20" align="middle">
        <el-col :span="12">
          <b>接单状态：</b>
          <el-tag :type="serviceData.settingsStatus === 0 ? 'success' : 'info'">
            {{ serviceData.settingsStatus === 0 ? "接单中" : "休息中" }}
          </el-tag>
        </el-col>
        <el-col :span="12">
          <b>账号状态：</b>
          <el-tag :type="serviceData.status === 0 ? 'success' : 'danger'">
            {{ serviceData.status === 0 ? "正常" : "冻结" }}
          </el-tag>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="box-card" style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <h2>认证信息</h2>
      </div>
      <el-row :gutter="20" align="middle">
        <el-col :span="12">
          <b>真实姓名：</b>
          {{ serviceData.workerCertificationAuditList[0].name }}
        </el-col>
        <el-col :span="12">
          <b>身份证号：</b>
          {{ serviceData.workerCertificationAuditList[0].idCardNo }}
        </el-col>
      </el-row>
      <el-row :gutter="20" align="middle">
        <el-col :span="12">
          <b>身份证人像照片：</b>
          <image-preview
            :src="serviceData.workerCertificationAuditList[0].frontImg"
            alt="身份证人像照片"
            class="cert-photo"
          />
        </el-col>
        <el-col :span="12">
          <b>身份证国徽照片：</b>
          <image-preview
            :src="serviceData.workerCertificationAuditList[0].backImg"
            alt="身份证国徽照片"
            class="cert-photo"
          />
        </el-col>
      </el-row>
      <el-row :gutter="20" align="middle">
        <el-col :span="24">
          <b>证件资料：</b>
          <image-preview
            :src="
              serviceData.workerCertificationAuditList[0].certificationMaterial
            "
            alt="证件资料"
            class="cert-photo"
          />
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getProvider } from "@/api/provider/provider";

export default {
  name: "baseinfo",
  props: {
    id: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      serviceData: {},
    };
  },
  created() {
    console.log(this.id);
  },
  mounted() {
    this.getList(); // 确保在 mounted 钩子中调用
  },
  methods: {
    getList() {
      getProvider(this.id).then((response) => {
        console.log(response);
        this.serviceData = response.data;
      });
    },
  },
};
</script>

<style scoped>
.service-detail {
  padding: 20px;
  background-color: #f9f9f9;
}

.box-card {
  margin-bottom: 20px;
}

.info-item {
  margin-bottom: 10px;
}

.cert-photo {
  max-width: 100px;
  height: auto;
  border-radius: 4px;
}
</style>